<template>
  <view>
    <u-navbar :back-text="$t('home.back')" back-icon-color="#ffffff" :back-text-style="backColor" :custom-back="backHome" :title="$t('home.weather')" :title-bold="true" title-color="#ffffff" :background="navbarBackground"></u-navbar>
	<view class="weather">
		<view class="weather-content">
			<view class="weather-content_header">
				<view class="weather-content_header--top">
					<view class="search-btn">
						<u-icon color="#ffffff" size="40" name="search" @click="$goPage('/location')"></u-icon>
					</view>
          <u-icon v-if="weather.location == 1" :label="weather.city" label-color="#ffffff" label-size="36" color="#ffffff" size="28" name="map-fill"></u-icon>
          <u-icon v-else :label="weather.city" label-color="#ffffff" label-size="36" color="#ffffff" size="28"></u-icon>
				</view>
				<view class="weather-content_header--num u-flex">{{ weather.tem }} <text>℃</text></view>
				<view class="weather-content_header--range">
					<text class="weather-content_header--range_top">{{ weather.maxwea }}℃ </text> / <text> {{weather.minwea}}℃</text>
				</view>
				<view class="weather-content_header--state">{{ weather.wea }}</view>
			</view>
			<u-sticky bg-color="transparent" offset-top="0">
				<scroll-view class="weather-content_today" scroll-x="true"  @scroll="scroll" scroll-left="0">
					<view class="weather-content_today--item" v-for="item in hours">
						<view class="time">{{item.hours}}</view>
						<u-icon label-pos="bottom" :label="item.wea+'%'" label-color="#80d9fe" label-size="24" size="58" :name="weaimgs[item.wea_img]"></u-icon>
						<view class="degrees">{{item.tem}}℃</view>
					</view>
				</scroll-view>
			</u-sticky>
			<view class="weather-content_list">
				<view class="weather-content_list--item u-flex" v-for="item in month">
					<view class="u-flex">
<!-- 						<view class="mgr-30">{{item.date}}</view> -->
						<view class="">{{ item.date }}</view>
					</view>
					<view class="u-flex-1">
						<u-icon :label="item.wea+'%'" label-color="#80d9fe" label-size="24" size="58" margin-left="16" :name="weaimgs[item.wea_img]"></u-icon>
					</view>
					<view class="u-flex">
						<view class="mgr-30">{{item.tem1}}</view>
						<view class="night-color">{{item.tem2}}</view>
					</view>
				</view>
			</view>
			<view class="u-flex weather-content_other">
				<!-- <view class="weather-content_other--item">
					<view class="">{{ weather.feelsLike }}℃</view>
					<text>{{$t('home.feels_like')}}</text>
				</view>
				<view class="weather-content_other--item">
					<view class="">{{ weather.humidity }}%</view>
					<text>{{$t('home.humidity')}}</text>
				</view> -->
				<view class="weather-content_other--item">
					<view class="">{{ weather.windSpeed }} km/h</view>
					<text>{{ hours[0].Win }}{{$t('home.wind')}}</text>
				</view>
			<!-- 	<view class="u-flex-1 weather-content_other--item">
					<view class="">{{ weather.altimeter }} hpa</view>
					<text>{{$t('home.altimeter')}}</text>
				</view> -->
			</view>
		</view>
	</view>
  </view>
</template>

<script>
import pageMixin from '@/utils/pageMixin';
export default {
  mixins: [pageMixin],
		data() {
			return {
				backColor:{
					color:'#ffffff'
				},
				navbarBackground:{
					backgroundColor:'#268fbc'
				},
				weather: [],
				hours: [],
				month: [],
				weaimgs: {
				  'qing': "/static/icon/weather/qing.png",
				  'yin': "/static/icon/weather/yin.png",
				  'yu': "/static/icon/weather/yu.png",
				  'xue': "/static/icon/weather/xue.png",
				  'yun': "/static/icon/weather/yun.png",
				  'lei': "/static/icon/weather/lei.png",
				  'wu': "/static/icon/weather/wu.png",
				  'shachen': "/static/icon/weather/shachen.png",
				  'bingbao': "/static/icon/weather/bingbao.png"
				}
			}
		},

		onLoad(param) {
		  this.getWeather(param.city);
		},
		onShow() {

		},
		components: {

		},
		computed:{
		},
		methods: {
      getWeather(cityName) {
		// let language = uni.getSystemInfoSync().language || '';
		// let lang = language.split('-')[0] || '';
		let lang = uni.getStorageSync('lang')
		if (lang == '中文') {
			lang = 'zh'
		}
		if (lang == 'English') {
			lang = 'en'
		}
		if (lang == 'русский') {
			lang = 'ru'
		}
		// console.log("--lang:--"+lang);
        this.$http.get('/weather/weather/api/info', {city: cityName,lang:lang}).then(res => {
          this.weather = res
		  console.log(JSON.stringify(res)+"-------------------------------");
          this.hours = res.data.Data[0].Hours;
          this.month = res.data.Data;
          this.changeCity(cityName)
        })
      },
      changeCity(cityName) {
		  let lang = uni.getStorageSync('lang')
		  if (lang == '中文') {
		  	lang = 'zh'
		  }
		  if (lang == 'English') {
		  	lang = 'en'
		  }
		  if (lang == 'русский') {
		  	lang = 'ru'
		  }
		  // console.log("--lang:--"+lang);
        this.$http.get('/weather/weather/api/data', {city:cityName,lang:lang}).then(res => {
        })
      },
      backHome() {
				uni.navigateBack()
    },
			scroll(e){
				//console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.weather {
		.mgr-30{
			margin-right: 30rpx;
		}
		.night-color{
			color: #86cbe9;
		}
		min-height: 100vh;
		background: linear-gradient(0deg, #66a9cb 0%, #268fbc 100%);
		&-content {
			padding: 60rpx 0;
			color: #FFFFFF;
			&_header{
				text-align: center;
				text-align: center;
				font-size: 30rpx;
				margin-bottom: 50rpx;
				&--top{
					position: relative;
					.search-btn{
						position: absolute;
						right: 30rpx;
					}
				}
				&--num{
					align-items: flex-start;
					justify-content: center;
					font-size: 168rpx;
					font-weight: 200;
					text{
						position: relative;
						top: 30rpx;
						font-size: 48rpx;
					}
				}
				&--range{
					margin-top: -10rpx;
					margin-bottom: 10rpx;
					color: #eaffff;
					text{
						display: inline-block;
						margin: 0 16rpx;
					}
					&_top{
						color: #FFFFFF;
					}
				}
			}
			&_today{
				height:314rpx;
				margin: 0 auto;
				white-space: nowrap;
				border-top: 1rpx solid #87cff2;
				border-bottom: 1rpx solid #87cff2;
				background-color: #3d98c2;
				&--item{
					text-align: center;
					padding: 40rpx 32rpx;
					font-size: 32rpx;
					display: inline-block;
					.time{
						padding-bottom: 28rpx;
					}
					.degrees{
						padding-top: 28rpx;
					}
				}
			}
			&_list{
				margin:50rpx 50rpx 0;
				font-size: 32rpx;
				border-radius:16rpx;
				&--item{
					text-align: center;
					justify-content: center;
					padding-bottom: 10rpx;
					margin-bottom: 20rpx;
					&:last-child{
						padding-bottom: 0;
						margin-bottom: 0;
						border-bottom:none;
					}
				}
			}
			&_other{
				margin:30rpx 20rpx 0;
				font-size: 32rpx;
				padding-top: 30rpx;
				border-top: 1rpx solid #87cff2;
				&--item{
					text-align: center;
					justify-content: center;
					padding:0 36rpx;
					margin: 10rpx 2rpx;
					border-right: 1rpx solid #87cff2;
					&:last-child{
						padding-bottom: 0;
						margin-bottom: 0;
						border-right:none;
					}
					text{
						font-size: 26rpx;
						color: #9dd5f5;
					}
					&:last-child{
						padding:0;
					}
				}
			}
		}
	}

</style>
